<template>
  <div class="modalgoods">
    <!-- 商品-对话框 -->
    <el-dialog
      title="选择商品"
      :visible.sync="dialogGoods"
      append-to-body
      width="40%">
      <el-form :model="goodsForm" ref="goodsForm" size="medium" class="flex-s">
        <el-form-item prop="goods_type">
          <el-select v-model="goodsForm.goods_type" filterable clearable placeholder="商品类别" style="width: 100%;">
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="keywords">
          <el-input v-model="goodsForm.keywords" placeholder="请输入商品编号或名称或型号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="search">查 询</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <div class="bank-form">
        <div class="form-item">
          <el-table
            :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            class="table"
            stripe border
            :header-cell-style="{background:'#f3f3f3'}"
            ><!--:data="用于存放请求数据回来的数组" -->
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope"></template>
            </el-table-column>
            <el-table-column prop="goods_no" label="商品编号" width="160">
            </el-table-column>
            <el-table-column prop="goods" label="商品名称" width="120">
            </el-table-column>
            <el-table-column prop="model" label="规格型号" width="120">
            </el-table-column>
            <el-table-column prop="unit" label="单位" width="160">
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页-页码 -->
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length">
          </el-pagination>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogGoods = false">取 消</el-button>
        <el-button type="primary" @click="dialogGoods = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'ModalGoods',
    props:{
    },
    data() {
      return {
        dialogGoods: false, //商品对话框
        currentPage: 1, //当前页码
        pagesize: 5,    //每页的数据条数
        tableData: [], //表格数据
        goodsForm: {
          goods_type: '',
          keywords: ''
        },
        typeList: [
          {value: '0',label: '浆果'},
          {value: '1',label: '柑橘属'}
        ]
      }
    },
    created() {
    },
    methods:{
      //打开对话框
      openGood() {
        this.dialogGoods = true;
      },
      // 查询
      search () {
        this.$refs['goodsForm'].validate(valid => {
          if (valid) {
            console.log(this.goodsForm)
            this.$message.success('保存成功')
          } else {
            this.$message.error('表单验证失败!')
          }
        })
      },

      //每页条数改变时触发事件,选择一页显示多少行
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.currentPage = 1;
        this.pagesize = val;
      },
      // 当前页改变时触发 跳转其他页
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
      }
    }
  }
</script>

<style>
</style>
